<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>双向柱状图</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
  const data = [
    { tem: 500, month: '3月' },
    { tem: -150, month: '4月' },
    { tem: 450, month: '5月' },
    { tem: -140, month: '6月' },
    { tem: 690, month: '7月' },
    { tem: 346, month: '8月' }
  ];
  const chart = new F2.Chart({
    id: 'mountNode',
    width: window.innerWidth,
    height: window.innerWidth * 0.64,
    pixelRatio: window.devicePixelRatio
  });
  chart.source(data, {
    tem: {
      tickCount: 5
    }
  });
  // chart.axis('month', {
  //   label: {
  //     font: 'sans-serif '
  //   },
  //   line: null,
  //   grid: null
  // });
  // chart.axis('tem', {
  //   label: null,
  //   grid: {
  //     stroke: '#f8f8f8'
  //   }
  // });
  chart.interval().position('month*tem').color('tem*month', function(tem, month) {
    if (month === '8月') {
      return '#f5623a';
    }
    if (tem >= 0) {
      return '#f8bdad';
    }
    if (tem < 0) {
      return '#99d6c0';
    }
  });

  // 辅助元素
  data.forEach(function(obj, index) {
    // 文字部分
    const offsetY = obj.tem > 0 ? -16 : 14;
    chart.guide().html({
      position: [ obj.month, obj.tem ],
      html: `<div style='color: #999999;'><span>${obj.tem}</span></div>`,
      offsetX: 0,
      offsetY
    });
    // 背景部分
    const offset = 0.25;
    chart.guide().rect({
      start: [ index - offset, 'max' ],
      end: [ index + offset, 'min' ],
      style: { fill: '#f8f8f8' }
    });
  });
  chart.render();
</script>
</body>
</html>
